import { DatePicker, Tooltip, Select, Input, Divider, TimePicker } from 'antd';
import styles from './index.less';
import moment from 'moment';
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';

const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';

export const generalRequiredFields = [
  { key: 'days', label: '定时申报天数' },
  { key: 'declSchedule', label: '定时申报时间' },
  { key: 'startDeclDate', label: '开始申报日' },
  { key: 'endDeclDate', label: '结束申报日' },
  { key: 'tradeWeek', label: '标定日' },
  { key: 'startTime', label: '开始时间' },
  { key: 'endTime', label: '结束时间' },
];

export const holidayRequiredFields = [
  { key: 'holidayName', label: '节假日名称' },
  { key: 'holidayStartDate', label: '运行日期组开始时间' },
  { key: 'holidayEndDate', label: '运行日期组结束时间' },
  { key: 'startDeclDate', label: '开始申报日' },
  { key: 'startTime', label: '开始时间' },
  { key: 'endDeclDate', label: '结束申报日' },
  { key: 'endTime', label: '结束时间' },
  { key: 'days', label: '天数' },
  { key: 'declSchedule', label: '节假日定时申报时间' },
];

const generalTableColumns = (onTableContentChange) => {
  return [
    {
      code: 'declWeek',
      name: '申报日',
      align: 'center',
      width: 80,
      lock: true,
      tooltip: true,
      render: (text, record) => {
        const weekMap = {
          1: '周一',
          2: '周二',
          3: '周三',
          4: '周四',
          5: '周五',
          6: '周六',
          7: '周日',
        };
        // 以 tradeWeek 为基准，days 可正可负，循环一周
        const base = Number(record.tradeWeek ?? text);
        const days = Number(record.days) || 0;
        if (!base || base < 1 || base > 7) return '-';
        let idx = (((base - 1 + days) % 7) + 7) % 7;
        const weekArr = [1, 2, 3, 4, 5, 6, 7];
        const weekNum = weekArr[idx];
        record.declWeek = weekNum;
        return weekMap[weekNum] || '-';
      },
    },
    {
      code: 'tradeWeek',
      name: '标定日',
      align: 'center',
      width: 100,
      render: (value, record) => {
        const weekOption = [
          { value: 1, label: '周一' },
          { value: 2, label: '周二' },
          { value: 3, label: '周三' },
          { value: 4, label: '周四' },
          { value: 5, label: '周五' },
          { value: 6, label: '周六' },
          { value: 7, label: '周日' },
        ];
        return (
          <Select
            value={record.tradeWeek ?? value}
            style={{ width: 80, fontSize: '12px' }}
            options={weekOption}
            onChange={(val) => {
              if (typeof onTableContentChange === 'function') {
                onTableContentChange(val, record, 'tradeWeek');
              }
            }}
          />
        );
      },
    },
    {
      code: 'startDeclDate',
      name: '开始申报日',
      align: 'center',
      width: 100,
      render: (value, record) => {
        return (
          <>
            <div className={styles.startDeclDate}>
              <span>D</span>
              <Divider type="vertical" />
              <Input
                value={record.startDeclDate ?? value}
                style={{ width: 50, fontSize: '12px' }}
                onChange={(val) => {
                  if (typeof onTableContentChange === 'function') {
                    onTableContentChange(val.target.value, record, 'startDeclDate');
                  }
                }}
              />
            </div>
          </>
        );
      },
    },
    {
      code: 'startTime',
      name: '开始时间',
      align: 'center',
      width: 100,
      render: (value, record) => {
        return (
          <TimePicker
            value={record.startTime ? moment(record.startTime, 'HH:mm:ss') : value}
            style={{ width: '100%', fontSize: '12px' }}
            format="HH:mm:ss"
            onChange={(time, timeString) => {
              if (typeof onTableContentChange === 'function') {
                onTableContentChange(timeString, record, 'startTime');
              }
            }}
          />
        );
      },
    },
    {
      code: 'endDeclDate',
      name: '结束申报日',
      align: 'center',
      width: 100,
      render: (value, record) => {
        return (
          <>
            <div className={styles.endDeclDate}>
              <span>D</span>
              <Divider type="vertical" />
              <Input
                value={record.endDeclDate ?? value}
                style={{ width: 50, fontSize: '12px' }}
                onChange={(val) => {
                  if (typeof onTableContentChange === 'function') {
                    onTableContentChange(val.target.value, record, 'endDeclDate');
                  }
                }}
              />
            </div>
          </>
        );
      },
    },
    {
      code: 'endTime',
      name: '结束时间',
      align: 'center',
      width: 100,
      render: (value, record) => {
        return (
          <TimePicker
            value={record.endTime ? moment(record.endTime, 'HH:mm:ss') : value}
            style={{ width: '100%', fontSize: '12px' }}
            format="HH:mm:ss"
            onChange={(time, timeString) => {
              if (typeof onTableContentChange === 'function') {
                onTableContentChange(timeString, record, 'endTime');
              }
            }}
          />
        );
      },
    },
    {
      code: 'declSchedule',
      name: '定时申报',
      align: 'center',
      width: 200,
      render: (value, record) => {
        return (
          <>
            <div className={styles.declSchedule}>
              <span>D</span>
              <Divider type="vertical" />
              <Input
                value={record.days ?? null}
                style={{ width: 57, fontSize: '12px' }}
                onChange={(val) => {
                  if (typeof onTableContentChange === 'function') {
                    onTableContentChange(val.target.value, record, 'days');
                    /* onTableContentChange(
                      Number.parseInt(val.target.value, 10) || 0,
                      record,
                      'days',
                    ); */
                  }
                }}
              />
              <TimePicker
                value={record.declSchedule ? moment(record.declSchedule, 'HH:mm:ss') : value}
                style={{ width: 100, fontSize: '12px' }}
                format="HH:mm:ss"
                onChange={(time, timeString) => {
                  if (typeof onTableContentChange === 'function') {
                    onTableContentChange(timeString, record, 'declSchedule');
                  }
                }}
              />
            </div>
          </>
        );
      },
    },
  ];
};

const windowsTableColumns = (onTableContentChange) => {
  return [
    {
      code: 'holidayName',
      name: '节假日',
      align: 'center',
      width: 120,
      lock: true,
      tooltip: true,
      render: (value, record) => {
        return (
          <Input
            value={record.holidayName ?? value}
            style={{ width: '100%' }}
            onChange={(val) => {
              if (typeof onTableContentChange === 'function') {
                onTableContentChange(val.target.value, record, 'holidayName');
              }
            }}
          />
        );
      },
    },
    {
      code: 'dayGroups',
      name: '运行日期组',
      align: 'center',
      width: 250,
      render: (_, record) => {
        return (
          <>
            <RangePicker
              style={{ width: '220px' }}
              value={[
                record.holidayStartDate ? moment(record.holidayStartDate, dateFormat) : moment(),
                record.holidayEndDate ? moment(record.holidayEndDate, dateFormat) : moment(),
              ]}
              format={dateFormat}
              onChange={(dates, dateStrings) => {
                if (typeof onTableContentChange === 'function') {
                  onTableContentChange(dates, record, 'holidayRange');
                }
              }}
            />
          </>
        );
      },
    },
    {
      code: 'startDeclDate',
      name: '开始申报日',
      align: 'center',
      width: 140,
      render: (value, record) => {
        return (
          <DatePicker
            value={record.startDeclDate ? moment(record.startDeclDate, dateFormat) : value}
            style={{ width: '100%', fontSize: '12px' }}
            onChange={(time, timeString) => {
              if (typeof onTableContentChange === 'function') {
                onTableContentChange(timeString, record, 'startDeclDate');
              }
            }}
          />
        );
      },
    },
    {
      code: 'startTime',
      name: '开始时间',
      align: 'center',
      width: 120,
      render: (value, record) => {
        return (
          <TimePicker
            value={record.startTime ? moment(record.startTime, 'HH:mm:ss') : value}
            style={{ width: '100%', fontSize: '12px' }}
            format="HH:mm:ss"
            onChange={(time, timeString) => {
              if (typeof onTableContentChange === 'function') {
                onTableContentChange(timeString, record, 'startTime');
              }
            }}
          />
        );
      },
    },
    {
      code: 'endDeclDate',
      name: '结束申报日',
      align: 'center',
      width: 140,
      render: (value, record) => {
        return (
          <DatePicker
            value={record.endDeclDate ? moment(record.endDeclDate, dateFormat) : value}
            style={{ width: '100%', fontSize: '12px' }}
            onChange={(time, timeString) => {
              if (typeof onTableContentChange === 'function') {
                onTableContentChange(timeString, record, 'endDeclDate');
              }
            }}
          />
        );
      },
    },
    {
      code: 'endTime',
      name: '结束时间',
      align: 'center',
      width: 120,
      render: (value, record) => {
        return (
          <TimePicker
            value={record.endTime ? moment(record.endTime, 'HH:mm:ss') : value}
            style={{ width: '100%', fontSize: '12px' }}
            format="HH:mm:ss"
            onChange={(time, timeString) => {
              if (typeof onTableContentChange === 'function') {
                onTableContentChange(timeString, record, 'endTime');
              }
            }}
          />
        );
      },
    },
    {
      code: 'days',
      name: '天数',
      align: 'center',
      width: 60,
      render: (value, record) => {
        if (record.holidayStartDate && record.holidayEndDate) {
          const start = moment(record.holidayStartDate, dateFormat);
          const end = moment(record.holidayEndDate, dateFormat);
          const days = end.diff(start, 'days') + 1;
          record.days = days;
          return days > 0 ? days : '';
        }
        return record.days || value || '-';
      },
    },
    {
      code: 'declSchedule',
      name: '定时申报',
      align: 'center',
      width: 200,
      render: (value, record) => {
        return (
          <DatePicker
            showTime
            value={record.declSchedule ? moment(record.declSchedule, 'YYYY-MM-DD HH:mm:ss') : value}
            onChange={(value, dateString) => {
              if (typeof onTableContentChange === 'function') {
                onTableContentChange(dateString, record, 'declSchedule');
              }
            }}
          />
        );
      },
    },
  ];
};

export const getColumns = ({ onHolidayAdd, onHolidayDel, type = '1', onTableContentChange }) => {
  const newTableColumns = [];
  if (type === '2') {
    windowsTableColumns(onTableContentChange).forEach((col) => {
      if (!_.isFunction(col.render)) {
        col.render = (value) => {
          const str = value || value === 0 ? value : value === undefined ? '' : '-';
          return col.tooltip && value ? (
            <Tooltip placement="top" title={str}>
              <div className={styles.textover}>{str}</div>
            </Tooltip>
          ) : (
            str
          );
        };
      }
      newTableColumns.push(col);
    });
    newTableColumns.push({
      name: '操作',
      code: 'operate',
      align: 'center',
      lock: true,
      //   width: 120,
      width: 60,
      render: (value, record, rowIndex) => {
        return (
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <span
              key="add"
              style={{
                padding: '0 10px',
                height: '14px',
                display: 'flex',
                alignItems: 'center',
                color: 'var(--ant-cus-primary_color)',
                cursor: 'pointer',
              }}
              onClick={() => onHolidayAdd()}
            >
              <PlusCircleOutlined />
            </span>
            <span
              key="del"
              style={{
                // borderLeft: '1px solid var(--font-a30)',
                paddingRight: '10px',
                height: '14px',
                display: 'flex',
                alignItems: 'center',
                color: 'var(--ant-cus-primary_color)',
                cursor: 'pointer',
              }}
              onClick={() => onHolidayDel(record, rowIndex)}
            >
              <MinusCircleOutlined />
            </span>
          </div>
        );
      },
    });
  } else {
    generalTableColumns(onTableContentChange).forEach((col) => {
      if (!_.isFunction(col.render)) {
        col.render = (value) => {
          const str = value || value === 0 ? value : value === undefined ? '' : '-';
          return col.tooltip && value ? (
            <Tooltip placement="top" title={str}>
              <div className={styles.textover}>{str}</div>
            </Tooltip>
          ) : (
            str
          );
        };
      }
      newTableColumns.push(col);
    });
  }

  return newTableColumns;
};
